<template>
    <view>
        <view>
            <nut-divider :style="{ color: 'rgb(163, 180, 234)' }" content-position="left">员工假别信息</nut-divider>
            <nut-table :columns="columns1" :data="data1" :striped="striped"></nut-table>
            <nut-table :columns="columns2" :data="data2" :striped="striped"></nut-table>
        </view>


        <view>
            <nut-divider :style="{ color: 'rgb(163, 180, 234)' }" content-position="left">我的销假单据</nut-divider>
            <nut-collapse v-model:active="activeName" :accordion="true">
                <nut-collapse-item :title="title1" :name="1">

                    <nut-textarea readonly model-value="2023/9/7-2023/9/8" />
                    <nut-textarea readonly model-value="天数：1天" />
                    <nut-button block type="primary">确认</nut-button>
                </nut-collapse-item>
                <nut-collapse-item :title="title2" :name="2">
                    <nut-textarea readonly model-value="2023/9/7-2023/9/8" />
                    <nut-textarea readonly model-value="天数：1天" />
                    <nut-button block type="primary">确认</nut-button>
                </nut-collapse-item>
            </nut-collapse>
        </view>
        <view>
            <nut-divider :style="{ color: 'rgb(163, 180, 234)' }" content-position="left">系统通知</nut-divider>
            <!-- <nut-ellipsis direction="end" expandText="展开" collapseText="收起" :style="{padding: '0 26px'}"
                content="NutUI3.0上线后我们研发团队也在不断的优化、测试、使用、迭代 Vue3 的相关组件，但是在跨端小程序的开发过程中，发现没有合适的组件库可以支持多端开发。为了填补这一空白，同时为了优化开发者体验，让 NutUI 能够为更多的开发者带来便利，我们决定在 NutUI 中增加小程序多端适配的能力。">
            </nut-ellipsis>
            <nut-divider   :style="{ color: 'rgb(0,181,110)', padding: '0 32px' }"/>
            <nut-ellipsis direction="end" expandText="展开" collapseText="收起" :style="{padding: '0 26px'}"
                content="NutUI3.0上线后我们研发团队也在不断的优化、测试、使用、迭代 Vue3 的相关组件，但是在跨端小程序的开发过程中，发现没有合适的组件库可以支持多端开发。为了填补这一空白，同时为了优化开发者体验，让 NutUI 能够为更多的开发者带来便利，我们决定在 NutUI 中增加小程序多端适配的能力。">
            </nut-ellipsis> -->
        </view>
        <view>
            <nut-divider :style="{ color: 'rgb(163, 180, 234)' }" content-position="left">我的审核单据</nut-divider>
            <nut-collapse v-model:active="activeName" :accordion="true">
                <nut-collapse-item :title="title1" :name="1">
                    <nut-textarea readonly model-value="2023/9/7-2023/9/8" />
                    <nut-textarea readonly model-value="天数：1天" />
                    <nut-button block type="primary">确认</nut-button>
                </nut-collapse-item>
                <nut-collapse-item :title="title2" :name="2">
                    <nut-textarea readonly model-value="2023/9/7-2023/9/8" />
                    <nut-textarea readonly model-value="天数：1天" />
                    <nut-button block type="primary">确认</nut-button>
                </nut-collapse-item>
            </nut-collapse>
        </view>
        <template>
</template>


    </view>
</template>

<script>
import { reactive, toRefs, h, ref } from 'vue';
import { Button, Icon } from '@nutui/nutui';
export default {
    props: {},
    setup() {
        const activeName = ref(1);
        const title = reactive({
            title1: '20230907病假',
            title2: '20230906病假',
        })
        const state = reactive({
            striped: true,
            columns1: [
                {
                    title: '本月加班',
                    key: 'byjb'
                },
                {
                    title: '之前可调休',
                    key: 'zqktx'
                },
                {
                    title: '本月调休',
                    key: 'bytx'
                },
                {
                    title: '结余可调休',
                    key: 'jyktx'
                },

            ],
            columns2: [
                {
                    title: '全年年假',
                    key: 'qnnj'
                },
                {
                    title: '剩余年假',
                    key: 'synj'
                },
                {
                    title: '带薪病假',
                    key: 'dxbj'
                },
                {
                    title: '剩余带薪病假',
                    key: 'sydxbj'
                }
            ],
            data1: [
                {
                    byjb: 0,
                    zqktx: 0,
                    bytx: 0,
                    jyktx: 13,

                },
            ],
            data2: [
                {
                    qnnj: 0,
                    synj: 0,
                    dxbj: 0,
                    sydxbj: 0,
                }
            ],
            columns3: [
                {
                    title: '序号',
                    key: 'number',
                    align: 'center'
                },
                {
                    title: '假别类型',
                    key: 'jblx'
                },
                {
                    title: '申请日期',
                    key: 'ApplicationDate'
                },

                {
                    title: '查看详细',
                    key: 'render'
                }
            ],

            data3: [
                {
                    number: 1,
                    jblx: '病假',
                    ApplicationDate: '2023/9/7',
                    render: () => {
                        return h(
                            Button,
                            {
                                onClick: () => {
                                    wx.showModal({
                                        title: '详细信息',
                                        content: '这是一些详细信息，您可以在这里放置您想要展示的内容。',
                                        showCancel: false, 
                                        confirmText: '关闭', 
                                        success(res) {
                                            if (res.confirm) {
                                                console.log('用户点击了关闭按钮');
                                            }
                                        }
                                    });
                                },
                                size: 'small',
                                type: 'primary'
                            },
                            '查看详情'
                        );
                    }
                },

            ]
        });
        return {
            activeName,
            ...toRefs(title),
            ...toRefs(state)
        };
    }
};
</script>
